<script setup>
import { useArticleStore } from '@/stores/index'
import { ref, defineProps } from 'vue'

const modelValue = defineModel({ type: [Number, String] })
const props = defineProps({
  // 父组件传递的宽度（核心新增）
  width: {
    type: String, // 宽度类型为字符串（必须带单位，如 '180px'、'250px'）
    default: '180px', // 默认宽度：父组件不传时用 180px，避免宽度异常
  },
})
console.log(props)
const useArticle = useArticleStore()
const channelList = ref([])

const getChannelList = () => {
  channelList.value = useArticle.channelList
}
getChannelList()
</script>
<template>
  <!-- 给 el-select 加 ref="selectRef"，用于主动触发更新 -->
  <el-select :style="{ width: width }" v-model="modelValue">
    <!-- label 展示给用户看的  value 提交给后台的-->
    <el-option v-for="item in channelList" :key="item.id" :label="item.cate_name" :value="item.id">
    </el-option>
  </el-select>
</template>
